<template>
  <div style="height: 400px;overflow: hidden">
    <div class="layui-container" style="position: relative;top: 50px" id="loginDiv">
      <div class="layui-row">
        <div class="layui-col-lg6 layui-col-lg-offset3" style="color: red;text-align: center">
          <h1>登陆蜗牛影院</h1>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-lg1 layui-col-lg-offset4" style="color: red;text-align: center">
          <h1><i class="layui-icon layui-icon-cellphone" style="font-size: 30px; color: #FF1493;"></i></h1>
        </div>
        <div class="layui-col-lg3">
          <el-input v-model="mobilePhone" placeholder="请输入手机号" maxlength="11" type="text"
                    onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');"></el-input>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-lg1 layui-col-lg-offset4" style="color: red;text-align: center">
          <h1><i class="layui-icon layui-icon-password" style="font-size: 30px; color: #FF1493;"></i></h1>
        </div>
        <div class="layui-col-lg3">
          <el-input v-model="userPassword" placeholder="请输入密码" show-password></el-input>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-lg1 layui-col-lg-offset4" style="color: red;text-align: center">
          <h1><i class="layui-icon layui-icon-auz" style="font-size: 30px; color: #FF1493;"></i></h1>
        </div>
        <div class="layui-col-lg1">
          <el-input v-model="checkCode" placeholder="验证码" maxlength="4"></el-input>
        </div>
        <div class="layui-col-lg1">
          <img src="/api/tato/kaptcha" alt="" style="width: 100%;height:40px" @click="changeKaptchaCode"
               ref="checkCodeImage">
        </div>
      </div>
      <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-lg1 layui-col-lg-offset5">
          <button type="button" class="layui-btn" style="width: 100%" @click="loginBtn">登陆</button>
        </div>
        <div class="layui-col-lg1" style="margin-left: 20px">
          <button type="button" class="layui-btn" style="width: 100%" @click="registerBtn">注册</button>
        </div>
      </div>
    </div>
    <div class="layui-container" style="position: relative;top: 200px" id="registerDiv">
      <div class="layui-row">
        <div class="layui-col-lg6 layui-col-lg-offset3" style="color: red;text-align: center">
          <h1>注册蜗牛影院</h1>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-lg12">
          <div
            style="height: 100px;width: 100px;border: 1px #FFB6C1 solid;margin: 0 auto;border-radius: 50px;overflow: hidden;">
            <img :src="userHeadImageUrl" alt="" style="height: 100px;width: 100px" @click="userHeadUpload">
            <input type="file" style="display: none" ref="uploadInput" accept="image/*" @change="addImg">
          </div>
          <div style="text-align: center">
            <h6 style="color: #F08080">点击上传头像</h6>
          </div>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-lg1 layui-col-lg-offset4" style="color: red;text-align: center">
          <h1><i class="layui-icon layui-icon-cellphone" style="font-size: 30px; color: #FF1493;"></i></h1>
        </div>
        <div class="layui-col-lg3">
          <el-input v-model="mobilePhone" placeholder="请输入手机号" @blur="checkPhoneOnlyOne"
                    maxlength="11" type="text" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'' );"></el-input>
        </div>
        <div class="layui-col-lg1">
          <i class="layui-icon layui-icon-ok" style="font-size: 30px; color: #00FF00;" v-if="canRegisterInfo==1"></i>
          <i class="layui-icon layui-icon-close" style="font-size: 30px; color: #FF3030;" v-if="canRegisterInfo==2"></i>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-lg1 layui-col-lg-offset4" style="color: red;text-align: center">
          <h1><i class="layui-icon layui-icon-password" style="font-size: 30px; color: #FF1493;"></i></h1>
        </div>
        <div class="layui-col-lg3">
          <el-input v-model="userPassword" placeholder="请输入密码" show-password></el-input>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-lg1 layui-col-lg-offset5">
          <button type="button" class="layui-btn" style="width: 100%" @click="checkRegisterBtn">注册</button>
        </div>
        <div class="layui-col-lg1" style="margin-left: 20px">
          <button type="button" class="layui-btn" style="width: 100%" @click="closeRegister">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "login_register_page",
        data() {
            return {
                userHeadImageUrl: "static/images/默认头像.jpeg",
                selectMovieInfo: "",
                mobilePhone: "",
                userPassword: "",
                checkCode: "",
                checkCodeImage: "/api/tato/kaptcha",
                phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
                canRegisterInfo: 0
            }
        },
        methods: {
            test() {
                console.log(this.uploadFile)
            },
            changeKaptchaCode() {
                // this.showCheckCodeImage=false
                this.$refs.checkCodeImage.src = ""
                this.$refs.checkCodeImage.src = "/api/tato/kaptcha"
            },
            loginBtn() {
                if (!this.phoneReg.test(this.mobilePhone)) {
                    layer.open({
                        title: '警告'
                        , content: '这不是一个手机号'
                    });
                } else if (this.userPassword.trim().length < 1) {
                    layer.open({
                        title: '警告'
                        , content: '请输入密码'
                    });
                } else if (this.checkCode.trim().length < 1) {
                    layer.open({
                        title: '警告'
                        , content: '请输入验证码'
                    });
                } else {
                    //将验证码发送给后端根据结果再来判断
                    this.$axios.get('/api/tato/loginKaptchaCode', {
                        params: {
                            kaptchaCode: this.checkCode
                        }
                    }).then((res) => {
                        if (res.data) {
                            //将用户名密码发给后端效验
                            this.$axios.get('/api/tato/loginPhoneAndPassword', {
                                params: {
                                    mobilePhone: this.mobilePhone,
                                    userPassword: this.userPassword
                                }
                            }).then((res) => {
                                if (res.data) {
                                    layer.msg('登陆成功', {icon: 1});
                                    sessionStorage.setItem("generalUser", JSON.stringify(res.data))
                                    setTimeout(() => {
                                        window.location.reload()
                                    }, 1000)
                                } else {
                                    layer.msg('用户名或密码错误', {icon: 5});
                                }
                            }).catch(function (error) {
                                console.log(error);
                            });
                        } else {
                            layer.msg('验证码错误', {icon: 5});
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },
            registerBtn() {
                $("#loginDiv").animate({
                    "top": "400"
                }, 2000)
                this.mobilePhone = ""
                this.userPassword = ""
                this.checkCode = ""
                $("#registerDiv").animate({
                    "top": "-200"
                }, 2000)
            },
            closeRegister() {
                $("#loginDiv").animate({
                    "top": "50"
                }, 2000)
                this.mobilePhone = ""
                this.userPassword = ""
                this.checkCode = ""
                this.canRegisterInfo = 0
                this.userHeadImageUrl = "static/images/默认头像.jpeg"
                $("#registerDiv").animate({
                    "top": "200"
                }, 2000)
            },
            userHeadUpload() {
                this.$refs.uploadInput.click()
            },
            checkPhoneOnlyOne() {
                //这是异步效验手机号是否存在
                if (this.phoneReg.test(this.mobilePhone)) {
                    this.$axios.get('/api/tato/checkPhoneOnlyOne', {
                        params: {
                            mobilePhone: this.mobilePhone
                        }
                    }).then((res) => {
                        if (res.data) {
                            this.canRegisterInfo = 1
                        } else {
                            this.canRegisterInfo = 2
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                } else {
                    this.$notify({
                        title: '警告',
                        message: '手机格式不符合',
                        type: 'warning'
                    });
                    this.canRegisterInfo = 0
                }
            },
            checkRegisterBtn() {
                if (this.phoneReg.test(this.mobilePhone) && this.userPassword.trim().length > 0 && this.canRegisterInfo == 1) {
                    //将信息上传至后台
                    let data = new FormData();
                    if (this.$refs.uploadInput.files[0] != undefined) {
                        data.append("file", this.$refs.uploadInput.files[0])
                    } else {
                        data.append("file", "默认头像")
                    }
                    data.append("mobilePhone", this.mobilePhone)
                    data.append("userPassword", this.userPassword)
                    this.$axios.post('/api/tato/generalUserRegisterPc', data).then((res) => {
                        if (res.data) {
                            this.$notify({
                                title: '注册成功',
                                type: 'success'
                            });
                            this.closeRegister()
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '服务器正忙,稍后再试'
                            });
                        }
                    })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            },
            addImg(e) {
                let inputer = this.$refs.uploadInput
                let file = inputer.files
                this.userHeadImageUrl = this.getObjectURL(file[0])
            },
            getObjectURL(file) {
                let url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                }
                return url;
            }
        },
        created() {
            layui.use('layer', function () {
                var layer = layui.layer;
            });
            let userTemp = sessionStorage.getItem("generalUser")
            if (userTemp != null) {
                this.$router.push({
                    name: "home_page"
                })
            }
        }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
